<template>
  <div class="content">
    <div class="rewardPeople">
      <div class="operation">
        <b>选择奖励人</b>
        <radio-group :current="current" class="radioBox">
          <radio
            v-for="(item,index) in fruit"
            :key="index"
            :value="item.name"
            color="#2b7bf8"
            @click="radioClick(item.name,item.id)"
            :checked="item.checked"
            class="radio"
          >{{item.name}}</radio>
        </radio-group>
      </div>
    </div>
    <!-- 爱豆豆奖励 -->
    <div class="loveDouDou">
      <div class="inputBox">
        <div class="inputLayout">
          <label for="loveDouDouNum">爱豆豆奖励个数</label>
          <input
            v-model="form.pension"
            id="loveDouDouNum"
            class="inputK"
            type="number"
            mode="wrapped"
            placeholder="请输入爱豆豆奖励个数"
            maxlength="999999"
            @change="loveDouDouNumChang"
          >
        </div>
        <div class="inputLayout">
          <label for="loveDouDouRen">爱豆豆奖励人数</label>
          <input
            v-model="form.pensionNum"
            id="loveDouDouRen"
            class="inputK"
            type="number"
            mode="wrapped"
            placeholder="请输入爱豆豆奖励人数"
            maxlength="999999"
            @change="loveDouDouRenChang"
          >
        </div>
      </div>
      <p>爱豆豆已经奖励人数:&nbsp;&nbsp;{{loveDouDouRenNum}}</p>
    </div>
    <!-- 优惠劵奖励 -->
    <div class="loveDouDou">
      <div class="inputBox">
        <div class="inputLayout inputLayout2">
          <label>选择优惠劵：</label>
          <div class="awardBtnBox">
            <span class="awardSelected">{{form.awardNum}}</span>
            <button class="awardBtn" @click="awardBtn">选择优惠劵</button>
          </div>
        </div>
        <div class="inputLayout">
          <label for="awardRen">优惠劵奖励人数</label>
          <input
            v-model="form.couponNum"
            id="awardRen"
            class="inputK"
            type="number"
            mode="wrapped"
            placeholder="请输入优惠劵奖励人数"
            maxlength="999999"
            @change="awardRenChang"
          >
        </div>
      </div>
      <p>优惠券已经奖励人数:&nbsp;&nbsp;{{awardRenNum}}</p>
    </div>
    <!-- 贝币金额奖励 -->
    <div class="loveDouDou">
      <div class="inputBox">
        <div class="inputLayout">
          <label for="bbNum">贝币奖励金额</label>
          <input
            v-model="form.balance"
            id="bbNum"
            class="inputK"
            type="number"
            mode="wrapped"
            placeholder="请输入贝币奖励金额"
            maxlength="999999"
            @change="bbNumChang"
          >
        </div>
        <div class="inputLayout">
          <label for="bbRen">贝币奖励人数</label>
          <input
            v-model="form.balanceNum"
            id="bbRen"
            class="inputK"
            type="number"
            mode="wrapped"
            placeholder="请输入贝币奖励人数"
            maxlength="999999"
            @change="bbRenChang"
          >
        </div>
      </div>
      <p>贝币已经奖励人数:&nbsp;&nbsp;{{bbNumRenNum}}</p>
    </div>
    <!-- 优惠券弹窗 -->
    <div class="awardWind" v-if="awardShow">
      <div class="zz"></div>
      <div class="awardWindCont">
        <button @click="awardCloseBtn" size="small" class="awardCloseBtn">关闭</button>
        <p class="awardWindContTitle">请选择奖励优惠券</p>
        <div
          class="clickSelectBox"
          v-for="(item,index) in discountList2"
          :key="index"
          @click="clickSelect(item.couponTypeName,item.couponTypeId)"
        >
          <div class="clickSelectLeft">
            <div class="clickSelectLeftCont">
              <div class="clickSelectLeftContLeft">
                <p>{{item.couponTypeName}}</p>
                <p>满{{item.reachAmount}}可用</p>
              </div>
              <!-- 1：满减卷 2：现金卷 3：折扣卷 -->
              <div class="flexP" v-if="item.couponType === '1'">
                <p v-if="item.couponType === '1'">￥{{item.reduceAmount}}</p>
              </div>
              <div class="flexP" v-if="item.couponType === '2'">
                <p v-if="item.couponType === '2'">￥{{item.cashAmount}}</p>
              </div>
              <div class="flexP" v-if="item.couponType === '3'">
                <p
                  class="clickSelectLeftContRight"
                  v-if="item.couponType === '3'"
                >{{item.discountRate}}折</p>
              </div>
            </div>
            <p class="clickSelectLeftContTime">开始时间：{{item.validDateStart}}</p>
            <p class="clickSelectLeftContTime">结束时间：{{item.validDateEnd}}</p>
          </div>
          <div class="clickSelectRight">
            <p>剩余张数</p>
            <span>{{item.number - item.receivedNumber}}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="switch">
      <span>启用</span>
      <i-switch :value="onOff" @change="onChange" slot="footer"></i-switch>
    </div>
    <button
      class="overBtn"
      @click="overBtn"
      size="small"
      shape="circle"
      type="primary"
    >完成</button>
  </div>
</template>

<script>
import { GET_TYPE_COUPON, UPDATE_SHARE_SHOP, ADD_SHARE_SHOP } from '@/api'

export default {
  components: {},
  data () {
    return {
      fruit: [
        {
          id: 0,
          name: '分享人',
          checked: false
        },
        {
          id: 1,
          name: '被分享人',
          checked: false
        },
        {
          id: 2,
          name: '分享人+被分享人',
          checked: false
        }
      ],
      current: '分享人',
      form: {},
      addForm: {},
      onOff: false,
      verify: {
        rewardMan: [{ bool: false, message: '请选择奖励人' }],
        pension: [{ bool: false, message: '请输入爱豆豆奖励个数' }],
        pensionNum: [{ bool: false, message: '请输入爱豆豆奖励人数' }],
        awardNum: [{ bool: false, message: '请选择优惠劵' }],
        couponNum: [{ bool: false, message: '请输入优惠劵奖励人数' }],
        balance: [{ bool: false, message: '请选择贝币奖励金额' }],
        balanceNum: [{ bool: false, message: '请选择贝币奖励人数' }]
      },
      loveDouDouRenNum: 0,
      bbNumRenNum: 0,
      awardRenNum: 0,
      awardShow: false,
      discountList: [
        {
          name: '无敌风火轮',
          yong: '200',
          zhekou: 20,
          shengyu: 100,
          type: 'manjian',
          time: '2019.12.1-2020.1.1'
        },
        {
          name: '无敌风火轮2222222',
          yong: '200',
          zhekou: 7.5,
          shengyu: 100,
          type: 'zhekou',
          time: '2019.12.1-2029.1.1'
        }
      ], // 假优惠券列表数据
      discountList2: [],
      addBool: false,
      addType: ''
    }
  },
  computed: {
    account () {
      return this.$cookie.get('account')
    }
  },
  onShow () {
    this.shareStateFun()
  },
  created () {},
  methods: {
    radioClick (name, value) {
      const vm = this
      if (name) {
        vm.verify.rewardMan[0].bool = true
      } else {
        vm.verify.rewardMan[0].bool = false
      }
      vm.form.rewardMan = value
      for (let i = 0; i < vm.fruit.length; i++) {
        if (vm.form.rewardMan === vm.fruit[i].id) {
          vm.fruit[i].checked = true
        } else {
          vm.fruit[i].checked = false
        }
      }
    }, // 点击选项
    loveDouDouNumChang (e) {
      const vm = this
      let val = e.mp.detail.value
      if (val) {
        vm.verify.pension[0].bool = true
      } else {
        vm.verify.pension[0].bool = false
      }
      vm.form.pension = val
    }, // 爱豆豆奖励个数
    loveDouDouRenChang (e) {
      const vm = this
      let val = e.mp.detail.value
      if (val) {
        vm.verify.pensionNum[0].bool = true
      } else {
        vm.verify.pensionNum[0].bool = false
      }
      vm.form.pensionNum = val
    }, // 爱豆豆奖励个数
    bbNumChang (e) {
      const vm = this
      let val = e.mp.detail.value
      if (val) {
        vm.verify.balance[0].bool = true
      } else {
        vm.verify.balance[0].bool = false
      }
      vm.form.balance = val
    }, // 贝币奖励金额
    bbRenChang (e) {
      const vm = this
      let val = e.mp.detail.value
      if (val) {
        vm.verify.balanceNum[0].bool = true
      } else {
        vm.verify.balanceNum[0].bool = false
      }
      vm.form.balanceNum = val
    }, // 贝币奖励人数
    awardRenChang (e) {
      const vm = this
      let val = e.mp.detail.value
      if (val) {
        vm.verify.couponNum[0].bool = true
      } else {
        vm.verify.couponNum[0].bool = false
      }
      vm.form.couponNum = val
    }, // 优惠劵奖励人数
    awardBtn () {
      this.awardShow = true
    }, // 选择优惠劵
    awardCloseBtn () {
      this.awardShow = false
    }, // 关闭优惠劵弹窗
    clickSelect (name, value) {
      const vm = this
      if (name) {
        vm.form.awardNum = name
        vm.form.couponTypeId = value
        vm.awardShow = false
        vm.verify.awardNum[0].bool = true
      } else {
        vm.verify.awardNum[0].bool = false
      }
    }, // 选择优惠券
    onChange (e) {
      let value = e.mp.detail.value
      this.onOff = value
      if (value) {
        this.form.state = '0'
      } else {
        this.form.state = '1'
      }
    }, // 开关
    overBtn () {
      const vm = this
      // let conut = 0
      // console.log(vm.form)
      // for (let i in vm.verify) {
      //   if (!vm.verify[i][0].bool) {
      //     console.log(vm.verify[i][0].bool)
      //     vm.smallHintFrame(vm.verify[i][0].message)
      //     conut++
      //   }
      // }
      // if (!conut) {
      //   UPDATE_SHARE_SHOP(vm.form)
      //     .then(r => {
      //       if (r.data.code === '0') {
      //         vm.$dialog('设置成功', '').then(() => {
      //           this.$router.go(-1)
      //         })
      //       } else {
      //         vm.smallHintFrame(r.data.message)
      //       }
      //     })
      //     .catch(e => {
      //       console.info(e)
      //     })
      // }
      let params = { ...vm.form }
      params.balance = Number(params.balance) * 100
      if (!vm.addBool) {
        UPDATE_SHARE_SHOP(params)
          .then(r => {
            if (r.data.code === '0') {
              vm.$alert('设置成功', '').then(() => {
                this.$router.go(-1)
              })
            } else {
              vm.smallHintFrame(r.data.message)
            }
          })
          .catch(e => {
            console.info(e)
          })
      } else {
        params.shareTypeEnum = vm.addType
        ADD_SHARE_SHOP(params)
          .then(r => {
            if (r.data.code === '0') {
              vm.$alert('添加成功', '').then(() => {
                this.$router.go(-1)
              })
            } else {
              vm.smallHintFrame(r.data.message)
            }
          })
          .catch(e => {
            console.info(e)
          })
      }
    }, // 完成按钮
    init (linkData) {
      this.form = {
        rewardMan: linkData.rewardMan,
        pension: linkData.pension,
        pensionNum: linkData.pensionNum,
        awardNum: '未选择优惠劵',
        couponNum: linkData.couponNum,
        balance: linkData.balance / 100,
        balanceNum: linkData.balanceNum,
        state: linkData.state,
        couponTypeId: linkData.couponTypeId,
        shopId: this.account.shopId,
        id: linkData.id
      }
      console.log(this.form.rewardMan)
    }, // 初始化
    shareStateFun () {
      const vm = this
      let linkData = JSON.parse(vm.$root.$mp.query.linkData)
      vm.addType = linkData.shareTypeEnum
      if (linkData.shareTypeEnum !== undefined) {
        vm.addBool = true
      } else {
        vm.addBool = false
      }
      if (linkData.state === '0' || linkData.state === undefined) {
        vm.onOff = true
      } else {
        vm.onOff = false
      }
      vm.loveDouDouRenNum = linkData.pensionedNum
      vm.bbNumRenNum = linkData.couponedNum
      vm.awardRenNum = linkData.balancedNum
      vm._getCoupon(linkData)
      vm.init(linkData)
      // linkData.rewardMan
      for (let i = 0; i < vm.fruit.length; i++) {
        if (Number(linkData.rewardMan) === Number(vm.fruit[i].id)) {
          vm.fruit[i].checked = true
        }
      }
    }, // 初始化
    _getCoupon (linkData) {
      const vm = this
      let params = {
        shopId: vm.account.shopId,
        state: 0
      }
      GET_TYPE_COUPON(params, 1, 99)
        .then(r => {
          if (r.data.code === '0') {
            vm.discountList2 = r.data.data.list
            for (let j = 0; j < vm.discountList2.length; j++) {
              if (
                Number(linkData.couponTypeId) ===
                Number(vm.discountList2[j].couponTypeId)
              ) {
                vm.form.awardNum = vm.discountList2[j].couponTypeName
                return
              } else {
                vm.form.awardNum = '未选择优惠劵'
              }
            }
          } else {
            vm.smallHintFrame('优惠券加载失败~~~')
          }
        })
        .catch(e => {
          console.info(e)
        })
    }, // 优惠劵查询
    smallHintFrame (value) {
      wx.showToast({
        title: value,
        icon: 'none',
        duration: 2000
      })
    } // 小提示框
  }
}
</script>

<style lang="scss">
@import 'static/styles/color.scss';

body {
  background: #fffffd !important;
}
.content {
  .inputBox {
    padding-top: 10px;
    .inputLayout {
      width: 300px;
      margin: 20px auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      label {
        font-size: 14px;
        font-weight: 500;
        color: #000;
      }
      .inputK {
        width: 150px;
        background: #edf0f5;
        border-radius: 5px;
        margin: 0;
        padding: 2px 15px;
        border: 1px solid #e0e1e3;
        font-size: 14px;
        height: 40px;
      }
    }
    .inputLayout2 {
      justify-content: flex-start;
      .awardBtnBox {
        display: flex;
        align-items: center;
        .awardSelected {
          width: 100px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-size: 12px;
          color: #999;
          margin: 0 10px;
        }
        .awardBtn {
          height: 24px;
          background: #508ff9;
          color: #fff;
          font-size: 12px;
          text-align: center;
          line-height: 24px;
          border-radius: 5px;
        }
      }
    }
  }
  .rewardPeople {
    width: calc(100% - 20px);
    margin: auto;
    min-height: 100px;
    box-shadow: 0 0 8px lighten($blue, 20%);
    transform: translateY(10px);
    .operation {
      b {
        font-size: 14px;
        font-weight: 500;
        color: #000;
        padding: 18px 0 0 20px;
      }
      .radioBox {
        font-size: 12px;
        color: #000;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 10px;
        .radio:nth-child(2) {
          margin: 0 25px;
        }
      }
    }
  }
  .loveDouDou {
    height: 200px;
    width: calc(100% - 20px);
    margin: 10px auto;
    box-shadow: 0 0 8px lighten($blue, 20%);
    transform: translateY(10px);
    p {
      width: 300px;
      margin: auto;
      font-size: 12px;
      color: #999999;
    }
  }
  .awardWind {
    .zz {
      position: fixed;
      z-index: 2;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      background-color: #000000;
      opacity: 0.3;
    }
    .awardWindCont {
      width: 320px;
      height: 550px;
      border: 2px solid #eee;
      background: #fff;
      border-radius: 4px;
      position: absolute;
      z-index: 3;
      left: 0;
      top: 0;
      bottom: 0;
      right: 0;
      margin: auto;
      overflow: auto;
      .awardCloseBtn {
        position: absolute;
        top: 0;
        right: 0;
        margin: 0 !important;
        font-size: 14px;
        color: #000;
      }
      .awardWindContTitle {
        height: 40px;
        line-height: 40px;
        text-align: center;
        font-size: 12px;
        color: #000;
      }
      .clickSelectBox {
        width: 290px;
        height: 83px;
        border-radius: 5px;
        border: 1px solid #bbbbbb;
        margin: 10px auto;
        display: flex;
        .clickSelectLeft {
          width: 70%;
          margin-left: 10px;
          .clickSelectLeftCont {
            display: flex;
            .clickSelectLeftContLeft {
              color: #000;
              p {
                width: 110px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                font-size: 14px;
                line-height: 14px;
                color: #000;
                margin: 5px 0;
              }
            }
            .flexP {
              display: flex;
              align-items: center;
              p {
                width: 74px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
            }
          }
          .clickSelectLeftContTime {
            font-size: 12px;
            color: #8a8686;
          }
        }
        .clickSelectRight {
          width: 30%;
          border-left: 1px dashed #8a8686;
          color: #000;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          p {
            font-size: 14px;
          }
          span {
            font-size: 12px;
          }
        }
      }
    }
  }
  .switch {
    width: 300px;
    margin: 10px auto;
    padding-top: 10px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    span {
      font-size: 14px;
      margin-right: 10px;
    }
  }
  .overBtn {
    text-align: center;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    white-space: nowrap;
    user-select: none;
    font-size: 14px;
    border-radius: 2px;
    border: 0 !important;
    position: relative;
    text-decoration: none;
    height: 44px;
    line-height: 44px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
    color: #fff !important;
    margin: 10px;
    background: #508ff9;
    border-radius: 25px;
  }
}
</style>
